<template>
  <div class="cc-edit-table">
    <div style="margin-bottom: 5px">
      <span>
        <span>新增&nbsp;</span>
        <el-input
          v-model.number="newRow"
          auto-complete="off"
          style="width:50px"
        ></el-input>
        <span>&nbsp;行&nbsp;</span>
      </span>
      <el-button type="success" @click="addNew">确定</el-button>
    </div>
    <el-form
      :model="formData"
      ref="dataForm"
      label-width="0px"
      label-position="right"
    >
      <!--表格栏-->
      <el-table
        ref="dataTable"
        class="cc-table"
        width="100%"
        border
        :data="formData.list"
      >
        <el-table-column
          v-for="column in columns"
          header-align="center"
          align="center"
          :prop="column.prop"
          :label="column.label"
          :width="column.width"
          :min-width="column.minWidth || 0"
          :key="column.prop"
        >
          <template v-slot="{ row, $index }">
            <span v-if="!column.show || column.show(row)">
              <el-form-item
                :prop="rules[column.prop] ? 'list.' + $index +'.' + column.prop : null"
                :rules="rules[column.prop]"
              >
                <cc-select
                  v-if="column.type === 'select' || column.dictCode !== undefined"
                  v-model="row[column.prop]"
                  :options="typeof column.options === 'function' ? column.options() : column.options"
                  :dictCode="column.dictCode"
                  :allowCreate="column.allowCreate"
                ></cc-select>
                <cc-number
                  v-else-if="column.type === 'number'"
                  v-model="row[column.prop]"
                  :point="column.point || 0"
                ></cc-number>
                <el-date-picker
                  v-else-if="column.type === 'date'"
                  v-model="row[column.prop]"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                />
                <ac-icon-select
                  v-else-if="column.type === 'icon-select'"
                  v-model="row[column.prop]"
                />
                <el-input
                  v-else
                  v-model="row[column.prop]"
                ></el-input>
              </el-form-item>
            </span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="80" header-align="center" align="center">
          <template v-slot="{ row }">
            <el-button
              @click="handleDeleteRow(row)"
              type="danger"
              link
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
  </div>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue';

const props = defineProps({
  columns: Array,
  rules: Object,
  dataList: {
    type: Array,
    default: () => { return [{}]; }
  },
});

const dataTable = ref();
const dataForm = ref();
const formData = ref({ list: [] });
const newRow = ref(1);
const newRowFlag = ref(0);

const init = (val) => {
  formData.value.list = [];
  (val || [{}]).forEach(data => {
    data.newRowFlag = ++newRowFlag.value
    formData.value.list.push(Object.assign({}, data))
  })
};

const addNew = () => {
  for (let i=0;i<newRow.value;i++) {
    formData.value.list.push({newRowFlag: ++newRowFlag.value});
  }
};

const handleDeleteRow = (row) => {
  for (let i=0;i<formData.value.list.length;i++) {
    if (row.newRowFlag !== undefined && row.newRowFlag === formData.value.list[i].newRowFlag) {
      formData.value.list.splice(i, 1);
      return;
    }
  }
};

const validate = (callback) => {
  const promise =  new Promise((resolve, reject) => {
    dataForm.value.validate(valid => resolve(valid)).catch(e => reject(e));
  });
  promise.then(valid => callback(valid)).catch(() => callback(false));
  return promise;
};

const getList = () => {
  return formData.value.list;
};

watch(() => props.dataList, (val) => {
  init(val)
});

onMounted(() => {
  init(props.dataList)
});

defineExpose({
  validate,
  getList
});
</script>

<style scoped>
.cc-edit-table .cc-table :deep(.el-form-item__content) {
  justify-content: center;
}
</style>